<template>
  <view class="wardrobe-container">
    <!-- 顶部导航 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="nav-header">
      <view class="page-title">个人衣橱</view>
      <view class="menu-btn" @tap="showMenu">
        <text class="menu-icon">☰</text>
      </view>
    </view>

    <!-- 衣橱统计区域 -->
    <view class="wardrobe-stats">
      <view class="stats-title">
        <text>我的衣橱 ({{totalItems}}件衣物)</text>
      </view>
      <view class="stats-boxes">
        <view class="stat-box" @tap="switchToCategory('tops')">
          <text class="stat-number">{{clothesStats.tops}}</text>
          <text class="stat-label">上衣</text>
        </view>
        <view class="stat-box" @tap="switchToCategory('pants')">
          <text class="stat-number">{{clothesStats.pants}}</text>
          <text class="stat-label">裤装</text>
        </view>
        <view class="stat-box" @tap="switchToCategory('skirts')">
          <text class="stat-number">{{clothesStats.skirts}}</text>
          <text class="stat-label">裙装</text>
        </view>
        <view class="stat-box" @tap="switchToCategory('accessories')">
          <text class="stat-number">{{clothesStats.accessories}}</text>
          <text class="stat-label">配饰</text>
        </view>
      </view>
    </view>

    <!-- 添加衣物区域 -->
    <view class="add-clothes-area">
      <view class="add-clothes-content">
        <view class="tshirt-icon">
          <text class="shirt-emoji">👚</text>
        </view>
        <text class="add-text">上传衣物照片，建立你的专属衣橱</text>
        <text class="add-subtext">右侧或上传现有衣物，让AI更好地帮你搭配</text>
        <button class="add-btn" @tap="addClothes">添加衣物</button>
      </view>
    </view>

    <!-- 开始智能搭配按钮 -->
    <view class="ai-recommendation-btn-area">
      <view class="button-container">
        <button class="ai-recommendation-btn" @tap="startAIRecommendation">
          <text class="icon-magic">✎</text>
          开始智能搭配
        </button>
        <button class="recharge-small-btn" @tap="goToRecharge">
          <text class="icon-recharge-small">💰</text>
          立即充值
        </button>
      </view>
    </view>

    <!-- 分类导航 -->
    <view class="category-nav">
      <scroll-view class="category-scroll" scroll-x="true" show-scrollbar="false">
        <view class="category-tabs">
          <view class="category-tab" :class="{'active': activeTab === 0}" @tap="switchTab(0)">全部衣物</view>
          <view class="category-tab" :class="{'active': activeTab === 1}" @tap="switchTab(1)">上衣</view>
          <view class="category-tab" :class="{'active': activeTab === 2}" @tap="switchTab(2)">裤装</view>
          <view class="category-tab" :class="{'active': activeTab === 3}" @tap="switchTab(3)">裙装</view>
          <view class="category-tab" :class="{'active': activeTab === 4}" @tap="switchTab(4)">外套</view>
          <view class="category-tab" :class="{'active': activeTab === 5}" @tap="switchTab(5)">鞋包</view>
          <view class="category-tab" :class="{'active': activeTab === 6}" @tap="switchTab(6)">首饰</view>
        </view>
      </scroll-view>
    </view>

    <!-- 衣物列表区域 -->
    <view class="clothes-list">
      <!-- 我的上衣部分 -->
      <view class="section" v-if="showTops">
        <view class="section-header">
          <text class="section-title">我的上衣</text>
          <text class="manage-link" @tap="manageWardrobe">{{manageText}}</text>
        </view>
        <view class="clothes-grid">
          <view class="clothes-item" v-for="item in filteredClothes.tops" :key="item.id" :class="{'new-item': item.isNew}">
            <view class="image-container" @tap="previewImage(item.image)">
              <image :src="item.image" mode="aspectFit"></image>
              <view class="edit-buttons" :class="{visible: isManageMode}">
                <button class="edit-btn" @tap.stop="editClothes(item)" v-if="isManageMode">
                  <text class="edit-icon">✎</text>
                </button>
                <button class="delete-btn" @tap.stop="deleteClothes(item.id)" v-if="isManageMode">
                  <text class="delete-icon">✗</text>
                </button>
              </view>
            </view>
            <view class="item-info">
              <text class="item-style">{{item.name}}</text>
              <text class="item-tags">{{item.tags}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 裙裤部分 -->
      <view class="section" v-if="showPantsSkirts">
        <view class="section-header">
          <text class="section-title">我的裙裤</text>
        </view>
        <view class="clothes-grid">
          <view class="clothes-item" v-for="item in filteredClothes.pants_skirts" :key="item.id" :class="{'new-item': item.isNew}">
            <view class="image-container" @tap="previewImage(item.image)">
              <image :src="item.image" mode="aspectFit"></image>
              <view class="edit-buttons" :class="{visible: isManageMode}">
                <button class="edit-btn" @tap.stop="editClothes(item)" v-if="isManageMode">
                  <text class="edit-icon">✎</text>
                </button>
                <button class="delete-btn" @tap.stop="deleteClothes(item.id)" v-if="isManageMode">
                  <text class="delete-icon">✗</text>
                </button>
              </view>
            </view>
            <view class="item-info">
              <text class="item-style">{{item.name}}</text>
              <text class="item-tags">{{item.tags}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 鞋包配饰部分 -->
      <view class="section" v-if="showAccessories">
        <view class="section-header">
          <text class="section-title">我的鞋包配饰</text>
        </view>
        <view class="clothes-grid">
          <view class="clothes-item" v-for="item in filteredClothes.accessories" :key="item.id" :class="{'new-item': item.isNew}">
            <view class="image-container" @tap="previewImage(item.image)">
              <image :src="item.image" mode="aspectFit"></image>
              <view class="edit-buttons" :class="{visible: isManageMode}">
                <button class="edit-btn" @tap.stop="editClothes(item)" v-if="isManageMode">
                  <text class="edit-icon">✎</text>
                </button>
                <button class="delete-btn" @tap.stop="deleteClothes(item.id)" v-if="isManageMode">
                  <text class="delete-icon">✗</text>
                </button>
              </view>
            </view>
            <view class="item-info">
              <text class="item-style">{{item.name}}</text>
              <text class="item-tags">{{item.tags}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-action">
      <!-- 移除了立即充值按钮 -->
    </view>
   
    <!-- 底部导航 -->
    <view class="bottom-tabs" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <view class="tab-item" :class="{'active': navTab === 0}" @tap="navSwitchTab(0)">
        <view class="tab-icon">🏠</view>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" :class="{'active': navTab === 1}" @tap="navSwitchTab(1)">
        <view class="tab-icon">👚</view>
        <text class="tab-text">个人衣橱</text>
      </view>
      <view class="tab-item" :class="{'active': navTab === 2}" @tap="navSwitchTab(2)">
        <view class="tab-icon">📋</view>
        <text class="tab-text">记录</text>
      </view>
    </view>

    <!-- 图片预览遮罩层 -->
    <view class="preview-overlay" v-if="showPreview" @tap="closePreview">
      <view class="preview-container" @tap.stop>
        <image :src="previewImageSrc" mode="aspectFit" class="preview-image"></image>
        <view class="close-preview" @tap="closePreview">×</view>
      </view>
    </view>

    <!-- 添加衣物模态窗口 -->
    <view class="add-modal-overlay" v-if="showAddModal" @tap="cancelAdd">
      <view class="add-modal" @tap.stop>
        <view class="add-modal-header">
          <text class="add-modal-title">添加衣物</text>
          <text class="add-modal-close" @tap="cancelAdd">×</text>
        </view>

        <view class="add-modal-body">
          <!-- 图片上传区域 -->
          <view class="upload-area" @tap="chooseImage">
            <image v-if="newClothes.image" :src="newClothes.image" mode="aspectFit" class="upload-preview"></image>
            <view v-else class="upload-placeholder">
              <text class="upload-icon">📷</text>
              <text class="upload-text">点击上传图片</text>
            </view>
          </view>

          <!-- 衣物信息表单 -->
          <view class="form-item">
            <text class="form-label">衣物名称</text>
            <input type="text" class="form-input" v-model="newClothes.name" placeholder="请输入衣物名称"/>
          </view>

          <view class="form-item">
            <text class="form-label">分类</text>
            <view class="category-select">
              <view 
                v-for="(cat, index) in categoryOptions" 
                :key="index"
                class="category-option" 
                :class="{'selected': newClothes.category === cat.value}"
                @tap="selectCategory(cat.value, cat.type)">
                {{ cat.label }}
              </view>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">风格</text>
            <view class="tag-select">
              <view
                v-for="(style, index) in styleOptions"
                :key="index"
                class="tag-option"
                :class="{'selected': newClothes.style === style}"
                @tap="selectStyle(style)">
                {{ style }}
              </view>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">季节</text>
            <view class="tag-select">
              <view
                v-for="(season, index) in seasonOptions"
                :key="index"
                class="tag-option"
                :class="{'selected': newClothes.season === season}"
                @tap="selectSeason(season)">
                {{ season }}
              </view>
            </view>
          </view>
        </view>

        <view class="add-modal-footer">
          <button class="modal-btn cancel-btn" @tap="cancelAdd">取消</button>
          <button class="modal-btn save-btn" @tap="saveNewClothes" :disabled="!isFormValid">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      statusBarHeight: 20,
      safeAreaBottom: 0,
      activeTab: 0,
      navTab: 1, // 默认为1，表示当前在个人衣橱页面
      totalItems: 36,
      isManageMode: false, // 是否处于管理模式
      clothesStats: {
        tops: 12,
        pants: 8,
        skirts: 6,
        accessories: 10
      },
      showPreview: false,
      previewImageSrc: '', // 改名为previewImageSrc，避免与方法同名
      
      // 衣物数据
      clothes: [
        // 上衣
        {
          id: 1,
          category: '上衣',
          type: '上衣',
          image: 'https://i.ibb.co/zHWBWpw2/frock-1.jpg',
          name: '国风真丝外套',
          tags: '四季 · 百搭'
        },
        {
          id: 2,
          category: '上衣',
          type: '上衣',
          image: 'https://i.ibb.co/k2k5Tyzs/frock-2.jpg',
          name: '新中式轻奢外套',
          tags: '春夏 · 约会'
        },
        {
          id: 3,
          category: '上衣',
          type: '外套',
          image: 'https://i.ibb.co/N27CV6qg/frock-3.jpg',
          name: '国风复古马甲',
          tags: '春秋 · 约会'
        },
        // 裙裤
        {
          id: 4,
          category: '裙裤',
          type: '裤装',
          image: 'https://i.ibb.co/qYyCgRsN/pants.jpg',
          name: '白色牛仔裤',
          tags: '四季 · 通勤'
        },
        {
          id: 5,
          category: '裙裤',
          type: '裙装',
          image: 'https://i.ibb.co/tPvhxkxw/pants.png',
          name: '高级感醋酸裙',
          tags: '春秋 · 约会'
        },
        // 配饰
        {
          id: 6,
          category: '配饰',
          type: '鞋包',
          image: 'https://i.ibb.co/r2JyQq63/bags-1.jpg',
          name: '桑蚕丝云朵包',
          tags: '四季 · 百搭'
        },
        {
          id: 7,
          category: '配饰',
          type: '鞋包',
          image: 'https://i.ibb.co/prGMNw27/bags-2.jpg',
          name: '刺绣纹样手拿包',
          tags: '四季 · 通勤'
        },
        {
          id: 8,
          category: '配饰',
          type: '首饰',
          image: 'https://i.ibb.co/20qzmqZr/jewelry-1.jpg',
          name: '闪耀星辰胸针',
          tags: '四季 · 约会'
        },
        {
          id: 9,
          category: '配饰',
          type: '首饰',
          image: 'https://i.ibb.co/T6sD2ms/jewelry-2.jpg',
          name: '满天星光项链',
          tags: '四季 · 约会'
        },
        {
          id: 10,
          category: '配饰',
          type: '鞋包',
          image: 'https://i.ibb.co/YBvz4XmL/bags-3.jpg',
          name: '国风复古手提包',
          tags: '春秋 · 通勤'
        }
      ],
      showAddModal: false,
      newClothes: {
        image: '',
        name: '',
        category: '',
        style: '',
        season: ''
      },
      categoryOptions: [
        { label: '上衣', value: '上衣', type: 'category' },
        { label: '裤装', value: '裤装', type: 'category' },
        { label: '裙装', value: '裙装', type: 'category' },
        { label: '外套', value: '外套', type: 'category' },
        { label: '鞋包', value: '鞋包', type: 'category' },
        { label: '首饰', value: '首饰', type: 'category' }
      ],
      styleOptions: ['简约', '复古', '甜美', '休闲', '正式', '运动'],
      seasonOptions: ['春季', '夏季', '秋季', '冬季']
    };
  },
  
  computed: {
    // 根据分类获取衣物列表
    filteredClothes() {
      if (this.activeTab === 0) {
        // 全部衣物
        return {
          tops: this.clothes.filter(item => item.category === '上衣'),
          pants_skirts: this.clothes.filter(item => item.category === '裙裤'),
          accessories: this.clothes.filter(item => item.category === '配饰')
        };
      } else if (this.activeTab === 1 || this.activeTab === 4) {
        // 上衣或外套
        return {
          tops: this.activeTab === 1 
            ? this.clothes.filter(item => item.type === '上衣') 
            : this.clothes.filter(item => item.type === '外套'),
          pants_skirts: [],
          accessories: []
        };
      } else if (this.activeTab === 2 || this.activeTab === 3) {
        // 裤装或裙装
        return {
          tops: [],
          pants_skirts: this.activeTab === 2
            ? this.clothes.filter(item => item.type === '裤装')
            : this.clothes.filter(item => item.type === '裙装'),
          accessories: []
        };
      } else {
        // 鞋包或首饰
        return {
          tops: [],
          pants_skirts: [],
          accessories: this.activeTab === 5
            ? this.clothes.filter(item => item.type === '鞋包')
            : this.clothes.filter(item => item.type === '首饰')
        };
      }
    },
    
    // 根据列表确定是否显示各部分
    showTops() {
      return this.filteredClothes.tops && this.filteredClothes.tops.length > 0;
    },
    
    showPantsSkirts() {
      return this.filteredClothes.pants_skirts && this.filteredClothes.pants_skirts.length > 0;
    },
    
    showAccessories() {
      return this.filteredClothes.accessories && this.filteredClothes.accessories.length > 0;
    },
    
    // 根据管理模式确定管理文本
    manageText() {
      return this.isManageMode ? '完成' : '管理衣橱';
    },
    
    isFormValid() {
      return this.newClothes.image && this.newClothes.name && this.newClothes.category && this.newClothes.style && this.newClothes.season;
    }
  },
  
  methods: {
    // 导航相关
    navSwitchTab(tabIndex) {
      if (this.navTab === tabIndex) return;
      
      this.navTab = tabIndex;
      
      switch(tabIndex) {
        case 0: // 首页
          uni.switchTab({
            url: '/pages/AI_try_on/new_tryai'
          });
          break;
        case 1: // 个人衣橱 - 当前页面，不需要跳转
          break;
        case 2: // 记录
          uni.switchTab({
            url: '/pages/AI_try_on/history'
          });
          break;
      }
    },
    
    // 分类导航相关
    switchTab(index) {
      this.activeTab = index;
      // 切换到对应的分类
    },
    
    // 衣物类别筛选
    switchToCategory(category) {
      switch(category) {
        case 'tops':
          this.activeTab = 1;
                  break;
        case 'pants':
          this.activeTab = 2;
                  break;
        case 'skirts':
          this.activeTab = 3;
                  break;
        case 'accessories':
          this.activeTab = 5;
                  break;
                default:
          this.activeTab = 0;
      }
    },
    
    // 菜单相关
    showMenu() {
      uni.showToast({
        title: '菜单功能开发中',
        icon: 'none'
      });
    },
    
    // 衣物管理
    manageWardrobe() {
      this.isManageMode = !this.isManageMode;
      
      if (this.isManageMode) {
        uni.showToast({
          title: '已进入管理模式',
          icon: 'none'
        });
              } else {
        uni.showToast({
          title: '已退出管理模式',
          icon: 'none'
        });
      }
    },
    
    // 删除衣物
    deleteClothes(id) {
      if (!this.isManageMode) return;
      
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这件衣物吗？',
        success: (res) => {
          if (res.confirm) {
            const index = this.clothes.findIndex(item => item.id === id);
            if (index !== -1) {
              this.clothes.splice(index, 1);
              this.updateClothesStats();
    
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              });
            }
          }
        }
      });
    },
    
    // 更新衣物统计
    updateClothesStats() {
      // 重新计算统计数据
      const tops = this.clothes.filter(item => item.category === '上衣').length;
      const pants = this.clothes.filter(item => item.type === '裤装').length;
      const skirts = this.clothes.filter(item => item.type === '裙装').length;
      const accessories = this.clothes.filter(item => item.category === '配饰').length;
      
      this.clothesStats = {
        tops,
        pants,
        skirts,
        accessories
      };
      
      this.totalItems = this.clothes.length;
    },
    
    // 添加衣物
    addClothes() {
      this.showAddModal = true;
    },
    
    // AI推荐
    startAIRecommendation() {
      uni.navigateTo({
        url: '/pages/recommendation/recommendation?fromWardrobe=true'
      });
    },
    
    // 充值
    goToRecharge() {
      uni.navigateTo({
        url: '/pages/AI_try_on/member_subscription'
      });
    },
    
    // 图片预览
    previewImage(url) {
      console.log('预览图片:', url);
      if (!url) {
        console.error('预览图片URL为空');
        return;
      }
      
      this.previewImageSrc = url;
      this.showPreview = true;
    },
    
    // 关闭预览
    closePreview() {
      this.showPreview = false;
      this.previewImageSrc = '';
    },
    
    // 缩放控制
    toggleFullScreen() {
      // 实现缩放控制逻辑
    },
    
    // 编辑衣物
    editClothes(item) {
      if (!this.isManageMode) return;
      
      uni.showToast({
        title: '编辑功能开发中',
        icon: 'none'
      });
    },
    
    // 添加衣物模态窗口相关方法
    cancelAdd() {
      this.showAddModal = false;
    },
    
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'],
        success: (res) => {
          if (res.tempFilePaths.length > 0) {
            this.newClothes.image = res.tempFilePaths[0];
          }
        }
      });
    },
    
    selectCategory(value, type) {
      this.newClothes.category = value;
    },
    
    selectStyle(style) {
      this.newClothes.style = style;
    },
    
    selectSeason(season) {
      this.newClothes.season = season;
    },
    
    saveNewClothes() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      
      // 确定衣物类别
      let category = '';
      let type = this.newClothes.category;
      
      if (type === '上衣' || type === '外套') {
        category = '上衣';
      } else if (type === '裤装' || type === '裙装') {
        category = '裙裤';
      } else if (type === '鞋包' || type === '首饰') {
        category = '配饰';
      }
      
      // 组合标签
      const tags = `${this.newClothes.season} · ${this.newClothes.style}`;
      
      // 创建新衣物对象
      const newItem = {
        id: Date.now(), // 使用时间戳作为唯一ID
        category: category,
        type: type,
        image: this.newClothes.image,
        name: this.newClothes.name,
        tags: tags,
        isNew: true // 标记为新添加，可用于显示"新添加"标签
      };
      
      // 添加到衣物列表
      this.clothes.unshift(newItem); // 添加到列表前面
      
      // 更新统计数据
      this.updateClothesStats();
      
      // 切换到对应的分类标签
      this.switchToCategory(category === '上衣' ? 'tops' : 
                           category === '裙裤' ? (type === '裤装' ? 'pants' : 'skirts') : 
                           'accessories');
      
      // 清空表单
      this.resetNewClothesForm();
      
      // 关闭模态窗口
      this.showAddModal = false;
      
      // 显示成功提示
      uni.showToast({
        title: '衣物添加成功',
        icon: 'success'
      });
      
      // 5秒后清除新添加标记
      setTimeout(() => {
        const index = this.clothes.findIndex(item => item.id === newItem.id);
        if (index !== -1) {
          this.clothes[index].isNew = false;
        }
      }, 5000);
    },
    
    resetNewClothesForm() {
      this.newClothes = {
        image: '',
        name: '',
        category: '',
        style: '',
        season: ''
      };
    }
  },
  
  onLoad() {
    // 获取状态栏高度和底部安全区域高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
    
    // 初始化统计数据
    this.updateClothesStats();
    
    // 设置当前激活的标签
    this.navTab = 1;
  }
};
</script>

<style lang="scss">
.wardrobe-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #ffecf2, #ffd6e4);
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 200rpx;
}

.status-bar {
  width: 100%;
  background-color: transparent;
}

.nav-header {
  height: 90rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
  background-color: transparent;
}

.menu-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30rpx;
  opacity: 0.7;
}

.menu-icon {
  font-size: 40rpx;
  color: #555;
}

.page-title {
  width: 100%;
  font-size: 38rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  letter-spacing: 2rpx;
}

.wardrobe-stats {
  background-color: rgba(255, 249, 251, 0.8);
  border-radius: 24rpx;
  margin: 0 30rpx 30rpx;
  padding: 34rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 107, 157, 0.08);
  backdrop-filter: blur(5px);
}

.stats-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34rpx;
  font-size: 28rpx;
  color: #333;
  letter-spacing: 1rpx;
}

.manage-link {
  color: #ff6b9d;
  font-size: 26rpx;
  font-weight: 500;
  opacity: 0.9;
  padding: 6rpx 16rpx;
  background-color: rgba(255, 107, 157, 0.1);
  border-radius: 20rpx;
}

.stats-boxes {
  display: flex;
  justify-content: space-between;
}

.stat-box {
  width: 22%;
  height: 150rpx;
  background-color: rgba(255, 236, 242, 0.7);
  border-radius: 18rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 2rpx 10rpx rgba(255, 107, 157, 0.06);
}

.stat-box:active {
  transform: scale(0.98);
  background-color: rgba(255, 236, 242, 0.9);
}

.stat-number {
  font-size: 42rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  opacity: 0.9;
}

.add-clothes-area {
  margin: 0 30rpx 35rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 24rpx;
  border: 2rpx dashed rgba(221, 221, 221, 0.8);
  box-shadow: 0 4rpx 20rpx rgba(255, 107, 157, 0.05);
  backdrop-filter: blur(5px);
}

.add-clothes-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44rpx 30rpx;
}

.tshirt-icon {
  width: 90rpx;
  height: 90rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shirt-emoji {
  font-size: 64rpx;
  color: #ff6b9d;
  opacity: 0.9;
}

.add-text {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 12rpx;
  text-align: center;
  letter-spacing: 1rpx;
  font-weight: 500;
}

.add-subtext {
  font-size: 24rpx;
  color: #888;
  margin-bottom: 34rpx;
  text-align: center;
  letter-spacing: 0.5rpx;
}

.add-btn {
  background-color: #ff6b9d;
  color: #fff;
  border-radius: 50rpx;
  font-size: 28rpx;
  padding: 16rpx 90rpx;
  margin-top: 10rpx;
  border: none;
  font-weight: 500;
  letter-spacing: 1rpx;
  box-shadow: 0 6rpx 16rpx rgba(255, 77, 126, 0.15);
}

.category-nav {
  background-color: transparent;
  padding: 0;
  margin: 0 0 24rpx 0;
}

.category-scroll {
  white-space: nowrap;
  height: 80rpx;
}

.category-tabs {
  display: inline-flex;
  height: 100%;
  padding: 0 20rpx;
}

.category-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 34rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
  height: 100%;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.category-tab.active {
  background-color: #ff6b9d;
  color: #fff;
  border-radius: 40rpx;
  opacity: 1;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.2);
  font-weight: 500;
  letter-spacing: 1rpx;
}

.clothes-list {
  padding: 0 30rpx;
}

.section {
  margin-bottom: 44rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  letter-spacing: 1rpx;
}

.sort-btn {
  font-size: 24rpx;
  color: #ff6b9d;
  background-color: rgba(255, 107, 157, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  transition: all 0.3s ease;
}

.sort-btn:active {
  background-color: rgba(255, 107, 157, 0.2);
}

.clothes-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.clothes-item {
  width: calc(50% - 20rpx);
  margin: 10rpx;
  background-color: transparent;
  border-radius: 18rpx;
  overflow: hidden;
  transition: all 0.2s ease;
}

.clothes-item:active {
  transform: scale(0.98);
}

.image-container {
  position: relative;
  width: 100%;
  height: 260rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18rpx;
}

.image-container image {
  width: 86%;
  height: 86%;
  object-fit: contain;  
  transition: all 0.3s ease;
}

.edit-buttons {
  position: absolute;
  bottom: 12rpx;
  right: 12rpx;
  display: flex;
  gap: 8rpx;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover .edit-buttons,
.isManageMode .edit-buttons {
  opacity: 1;
}

.edit-btn, .delete-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  background-color: rgba(58, 134, 255, 0.85);
  backdrop-filter: blur(5rpx);
  border: none;
  padding: 0;
}

.delete-btn {
  background-color: rgba(255, 71, 87, 0.85);
}

.edit-icon, .delete-icon {
  font-size: 24rpx;
  line-height: 1;
}

.item-info {
  padding: 16rpx 4rpx;
}

.item-style {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
  display: block;
  font-weight: 500;
}

.item-tags {
  font-size: 22rpx;
  color: #888;
  letter-spacing: 0.5rpx;
}

.item-price {
  font-size: 26rpx;
  color: #ff6b9d;
  font-weight: bold;
  letter-spacing: 0.5rpx;
  margin-top: 4rpx;
}

.shop-tag {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: #ff6b9d;
  color: #ffffff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(255, 107, 157, 0.3);
  font-weight: 500;
  z-index: 2; /* 确保标签显示在图片之上 */
}

.bottom-action {
  padding: 36rpx 30rpx;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.icon-magic {
  margin-right: 12rpx;
  font-size: 32rpx;
}

.action-btn {
  background: linear-gradient(to right, #ff6b9d, #ff4d7e);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 22rpx 0;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 8rpx 20rpx rgba(255, 77, 126, 0.2);
  font-weight: 500;
  letter-spacing: 2rpx;
}

.recharge-btn {
  background: linear-gradient(to right, #ff8ab6, #ff679e);
  box-shadow: 0 8rpx 20rpx rgba(255, 106, 158, 0.2);
}

.icon-recharge {
  margin-right: 12rpx;
  font-size: 32rpx;
}

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  border-top: 1px solid rgba(240, 240, 240, 0.5);
  backdrop-filter: blur(10px);
  z-index: 100;
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12rpx 0;
    
    .tab-icon {
      font-size: 44rpx;
      margin-bottom: 6rpx;
      color: #aaa;
    }
    
    .tab-text {
      font-size: 24rpx;
      color: #999;
    }
    
    &.active {
      .tab-icon {
        color: #ff5c8d;
      }
      
      .tab-text {
        color: #ff5c8d;
        font-weight: bold;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: linear-gradient(to right, #ff7eb3, #ff4d8d);
        border-radius: 2rpx;
      }
    }
  }
}

.clothes-item.new-item {
  animation: highlight-new-item 3s ease;
  box-shadow: 0 0 20rpx rgba(255, 107, 157, 0.8);
  position: relative;
}

@keyframes highlight-new-item {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20rpx rgba(255, 107, 157, 0.8);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30rpx rgba(255, 107, 157, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20rpx rgba(255, 107, 157, 0.8);
  }
}

.clothes-item.new-item::after {
  content: '新添加';
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: #ff6b9d;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
  z-index: 5;
}

.preview-overlay {
  position: fixed;
  top: 20%;
  left: 10%;
  width: 80%;
  height: 60%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
  border-radius: 16rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.35);
}

.preview-container {
  position: relative;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fade-in 0.3s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8rpx;
  box-shadow: 0 5rpx 25rpx rgba(0, 0, 0, 0.3);
}

.close-preview {
  position: absolute;
  top: -15rpx;
  right: -15rpx;
  width: 55rpx;
  height: 55rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  color: #ffffff;
  font-weight: 300;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5rpx);
  transition: all 0.2s ease;
  z-index: 20;
}

.close-preview:active {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(0.95);
}

.image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0 0 8rpx 8rpx;
  padding: 10rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.zoom-hint {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  letter-spacing: 1rpx;
}

.preview-controls {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  display: flex;
}

.control-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15rpx;
  color: #fff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5rpx);
  transition: all 0.2s ease;
}

.control-btn:active {
  transform: scale(0.95);
  background-color: rgba(255, 255, 255, 0.25);
}

.control-icon {
  font-size: 32rpx;
  font-weight: 300;
}

.visible {
  opacity: 1 !important;
}

.add-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.add-modal {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  width: 80%;
  max-width: 600rpx;
  position: relative;
}

.add-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.add-modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.add-modal-close {
  font-size: 36rpx;
  color: #999;
}

.add-modal-body {
  margin-bottom: 30rpx;
}

.upload-area {
  width: 100%;
  height: 200rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-icon {
  font-size: 48rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #999;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  padding: 10rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}

.category-select {
  display: flex;
  flex-wrap: wrap;
}

.category-option {
  padding: 8rpx 16rpx;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 40rpx;
  margin: 4rpx;
  transition: all 0.2s ease;
}

.category-option.selected {
  background-color: #ff6b9d;
  color: #fff;
}

.tag-select {
  display: flex;
  flex-wrap: wrap;
}

.tag-option {
  padding: 8rpx 16rpx;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 40rpx;
  margin: 4rpx;
  transition: all 0.2s ease;
}

.tag-option.selected {
  background-color: #ff6b9d;
  color: #fff;
}

.add-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-btn {
  background-color: #ff6b9d;
  color: #fff;
  border-radius: 50rpx;
  font-size: 28rpx;
  padding: 16rpx 32rpx;
  border: none;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.cancel-btn {
  background-color: #999;
}

.save-btn {
  background-color: #ff6b9d;
}

.save-btn:disabled {
  background-color: #ddd;
}

.ai-recommendation-btn-area {
  margin: 20rpx 30rpx 35rpx;
  padding: 0;
}

.button-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
  width: 100%;
}

.ai-recommendation-btn {
  flex: 3;
  background: linear-gradient(to right, #ff6b9d, #ff4d7e);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 22rpx 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 8rpx 20rpx rgba(255, 77, 126, 0.2);
  font-weight: 500;
  letter-spacing: 2rpx;
}

.recharge-small-btn {
  flex: 1;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.9);
  color: #ff6b9d;
  border: 1rpx solid #ff6b9d;
  border-radius: 40rpx;
  font-size: 24rpx;
  padding: 0 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 10rpx rgba(255, 77, 126, 0.1);
}

.icon-recharge-small {
  font-size: 22rpx;
  margin-right: 6rpx;
}

.chat-floating-button {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5rpx);
  transition: all 0.2s ease;
}

.chat-floating-button:active {
  transform: scale(0.95);
}

.chat-icon {
  width: 48rpx;
  height: 48rpx;
}
</style> 